<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Devices</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='control_style.css') }}"/>
    <script src="{{ url_for('static', filename='jquery-1.10.2.js') }}"></script>
</head>
<body>
<div id="" class="left full-height">
    <!-- logo -->
    <div id="" class="logo-bar">
        <div id="" class="ele full-height">
            <h1 style="color: #ededed;">LOGO</h1>
        </div>

    </div>
    <!-- tabs -->
    <div id="" class="tab-bar">
        <div style="height: 50px;width: 100%"></div>
        <a href="/devices">
            <div id="" class="tab-content choix">
                DEVICES
            </div>
        </a>
        <a href="/types">
            <div id="" class="tab-content no-choix">
                TYPE
            </div>
        </a>
        <a href="/conn">
            <div id="" class="tab-content no-choix">
                CONNECTIONS
            </div>
        </a>
        <a href="/log">
            <div id="" class="tab-content no-choix">
                LOG
            </div>
        </a>
        <a href="/groups">
            <div id="" class="tab-content no-choix">
                GROUPS
            </div>
        </a>
    </div>
</div>

<div id="" class="right full-height">
    <!-- admin -->
    <div id="" class="admin-bar">

    </div>
    <!-- main content -->
    <div id="" class="content-background">
        <div class="content-box">
            <div class="data-box" style="padding-left: 30px">
                <div id="device_function"></div>
            </div>

        </div>

    </div>
</div>
</body>
<script>
    function jump(url) {
        window.location.href = url;
    }

    function create_xhr() {
        let XHR = [  //兼容不同浏览器和版本得创建函数数组
            function () {
                return new XMLHttpRequest()
            },
            function () {
                return new ActiveXObject("Msxml2.XMLHTTP")
            },
            function () {
                return new ActiveXObject("Msxml3.XMLHTTP")
            },
            function () {
                return new ActiveXObject("Microsoft.XMLHTTP")
            }
        ];
        let xhr = null;
        //尝试调用函数，如果成功则返回XMLHttpRequest对象，否则继续尝试
        for (let i = 0; i < XHR.length; i++) {
            try {
                xhr = XHR[i]();
            } catch (e) {
                continue  //如果发生异常，则继续下一个函数调用
            }
            break;  //如果成功，则中止循环
        }
        return xhr;  //返回对象实例
    }

    let device_function = document.getElementById('device_function');
    modify_device_interior("{{device_id}}")

    function modify_device_interior(device_id){
        var updata = {
            "sender": "主控界面",
            "addresseeId": device_id,
            "command": {
                "target": "GetParamNames"
            }
        };

        $.ajax({
            type: "POST",
            url: "/master/appointEquipmentUpstream",
            'data': JSON.stringify(updata),
            dataType: "json",
            'processData': false,
            'contentType': 'application/json',
            success: function (data) {
                hTile = document.createElement("h2");
                hTile.innerHTML = "Modify Parametres";
                device_function.appendChild(hTile);
                console.log(data)
                paramForm = document.createElement("from");
                paramForm.id = 'paramForm';
                paramForm.name = 'paramForm';
                for (var p in data.data) { //遍历json对象的每个key/value对,p为key
                    paramDiv = document.createElement("div");
                    paramDiv.style.padding = "10px";
                    paramDiv.style.display = "block";
                    paramForm.appendChild(paramDiv);
                    keys = p.split("|");
                    var newEle = document.createElement("label");
                    newEle.style.padding = "10px";
                    if (keys[1] == null || keys[1] == "") {
                        newEle.innerHTML = keys[0];
                    } else {
                        newEle.innerHTML = keys[1];
                    }
                    var input = document.createElement("input");
                    input.style.padding = "10px";
                    input.type = "text";
                    input.name = p;
                    input.value = data.data[p];
                    input.style.cssText = "width: 400px"
                    paramDiv.appendChild(newEle);
                    paramDiv.appendChild(input);
                    paramForm.appendChild(paramDiv);
                }
                device_function.appendChild(paramForm);

                inputBut = document.createElement("input");
                inputBut.type = 'button';
                inputBut.name = 'submit';
                inputBut.value = '提交';
                inputBut.addEventListener("click", function () {
                    getFormInfo(device_id);
                }, false);
                device_function.appendChild(inputBut);
            }
        });
    }

    function getFormInfo(id) {
        var modifyParamsData = {}
        modifyParamsData["addresseeId"] = id
        modifyParamsData["sender"] = "主控界面"
        modifyParamsData["command"] = ergodicData('paramForm')

        $.ajax({
            type: "POST",
            url: "/master/appointEquipmentUpstream",
            'data': JSON.stringify(modifyParamsData),
            dataType: "json",
            'processData': false,
            'contentType': 'application/json',
            success: function (data) {
                console.log(data)
                if (data.data == "1") {
                    alert("修改成功")
                    jump('/devices')
                } else {
                    alert("修改失败")
                }

            }
        });
    }


    // 根据父级元素的ID，来遍历ul li列表中的input name 和val 生成对象，如果全部为空则返回false
    function ergodicData(dom) {
        xDOM = $("#" + dom + " input")
        var formdata = {}
        formdata["target"] = "ModifyParams"
        for (var i = 0; i < xDOM.length; i++) {
            var a = xDOM.eq(i).attr('name')
            if (xDOM.eq(i).val() == "") {
                return false;
            } else {
                formdata[a] = xDOM.eq(i).val()
            }
        }
        return formdata;
    }



</script>
</html>